<!--自定义表单-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <form-create v-model="fApi" :rule="ruleData" :option="optionData" :style="formStyleObject"></form-create>
  </div>
</template>

<script>
  import Vue from 'vue'

  import formCreate from '@form-create/iview'
  Vue.use(formCreate);

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'
  import CustomForm from './CustomForm'

  const _this = {
    name: 'CustomForm', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        formOption: {
          form: {
            labelWidth: 100,
            labelPosition: 'right',
            inline: false,
            showMessage: true
          },
          submitBtn: {
            type: 'primary',
            size: 'default',
            shape: undefined,
            long: true,
            icon: 'md-checkmark',
            innerText: '提交',
            show: true,
            col: undefined
          },
          resetBtn: {
            type: "default",
            size: "default",
            shape: undefined,
            long: true,
            icon: "md-refresh",
            innerText: "重置",
            show: false,
            col: undefined
          },
          style: {
            formItemColor: '#fff'
          }
        },

        rule: [
          CustomForm.buildInputObj()
        ],

        submitCode: '', // 自定义提交逻辑代码

      }, PnDesigner.buildFuncCompGlobalField())
    },
    data() {
      return {
        fApi: {}
      }
    },
    mounted() {
      this.runCustomGlobalJsCode()
    },
    methods: {

    },
    computed: {
      optionData () {
        return {
          form: this.component.compConfigData.formOption.form,
          submitBtn: this.component.compConfigData.formOption.submitBtn,
          resetBtn: this.component.compConfigData.formOption.resetBtn,
          onSubmit: (formData) => {
            let _this = this;
            eval(this.component.compConfigData.submitCode);
            // alert(JSON.stringify(formData));
          },
        }
      },
      ruleData () {
        let newRule = this.$PnUtil.deepClone(this.component.compConfigData.rule);
        newRule.forEach((r)=>{
          /*r.on = {
            'on-change': () => {
              console.log(this)
            },
            'on-blur': () => {
              console.log(this.fApi.getValue('field_1594019968451'))
            }
          }*/
          if (r.type == 'i-button') {
            r.on = {
              'click': () => {
                let _this = this;
                eval(r.customJsCode)
              }
            }
          }
        });
        return newRule
      },
      formStyleObject () {
        return {
          '--form-item-color': this.component.compConfigData.formOption.style.formItemColor,
        }
      }
    },
    watch: {
      'component.compConfigData.formOption': {
        handler: function (value) {
          if (this.fApi) {
            this.fApi.updateOptions(value)
          }
        },
        deep: true
      }
    }
  };

  export default _this
</script>

<style scoped>
  >>> .ivu-form-item-label {
    color: var(--form-item-color);
  }
  >>> .ivu-checkbox-wrapper span {
    color: var(--form-item-color);
  }
  >>> .ivu-radio-wrapper {
    color: var(--form-item-color);
  }
  >>> .ivu-rate-text span {
    color: var(--form-item-color);
  }
</style>
